import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Pagination } from 'antd';

const P = {
    // 添加一个方法
    list(item){
        const list = item.map((val,key)=>(
            <li key={val.id}>{val.main_title}</li>
        ))
        return list;
    },
    list2(item){
        const list = item.map((val,key)=>(
            <li key={val.id}>{val.id}---{val.main_title}</li>
        ))
        return list;
    }
}
const Unit = {
    async getApi(ajaxCfg){
        let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
        {
            headers: ajaxCfg.headers
        })
        return data;
    },
    async postApi(url,cfg,headers){
        let fd = new FormData();
        for(let key in cfg){
            fd.append(key, cfg[key]);
        }
        let	data = await axios.post(url,fd,
        {
            headers: headers
        })
        return data;
    },
    async putApi(url,cfg,headers){
        // import qs from 'qs';
        // let	data = await axios.put(url,qs.stringify(cfg),{
        //     headers: {
        //         'Content-Type':'application/x-www-form-urlencoded',
        //     }
        // })
        // return data;
    },
    async requestApi(cfg,headers,file){
       let fd = new FormData();
       fd.append('param', JSON.stringify(cfg));
       if(file){
           // 上传证明
           if(file.length){
               for(let i=0,len=file.length;i<len;i++){
                   fd.append('files', file[i]);
               }
           }else {
               // 单个上传
               for(let key in file){
                   fd.append(key, file[key]);
               }
           }
       }
       let	data = await axios.post('/batch',fd,
       {
           headers: headers
       })
       return data;
   }
}

const View = (props)=>{
    // 定义一个数据list
    const [listData ,setListData ] = useState([]);

    const [pageCfg, setPageCfg] = useState({
        currentPage:1,
        total:0
    })

    function ajaxPage(page_number=1,page_size=10){
        const cfg = {
            url:'/home/mediareports',
            cfg:{
                page_number:page_number,
                page_size:page_size
            },
            headers:{}
        }
        Unit.getApi(cfg).then((res)=>{
            console.log(res.data)
            setListData(res.data.data);
            setPageCfg({
                currentPage:page_number,
                total:res.data.total
            })
        })
    }
    useEffect(()=>{
        ajaxPage();
    },[listData.id])

    return(
        <div>
            新页面hook
            <h3>第一次循环</h3>
            <ul>{P.list(listData)}</ul>
            <Pagination onChange={ajaxPage} defaultCurrent={pageCfg.currentPage} total={pageCfg.total} />
        </div>
    )
}
export default View;
